<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>BootStrap-Selection Example</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="../bootstrap-selection.css" rel="stylesheet">

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/underscore-min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../bootstrap-selection.js"></script>
    <!-- HTML5 Support for IE -->
    <!--[if lt IE 9]>
      <script src="js/html5shim.js"></script>
    <![endif]-->
    <!--[if lt IE 8]>
      <link href="css/font-awesome-ie7.min.css" rel="stylesheet">
    <![endif]-->
    </head>
    <body>
        <div class="container">
            <h1>Bootstrap Selection Beta V0.1.1</h1>
            <p>基于Bootstrap.dropdown来制作的一个下拉多选控件 使用前需加载JQuery、Bootstrap库（样式和JS）还有underscore js。</p>

            <h3>综合例子</h3>
            <div id="small-exp" class="dropdown dropdown-checkbox" data-target="dropdown-checkbox" data-title='星级 <b class="caret"></b>'>
                <a href="#" id="drop2" role="button" class="dropdown-checkbox-toggle dropdown-toggle" data-toggle="dropdown">星级 <b class="caret"></b></a>
                <ul class="dropdown-menu dropdown-checkbox-menu" role="menu" aria-labelledby="drop2"></ul>
            </div>
            <script type="text/javascript">
                !function($,$el){
                    if(!$el.length) return;

                    var data = [{"id":1,"name":"star","content":"五星"},{"id":2,"name":"star","content":"准五星"},{"id":3,"name":"star","content":"四星"},{"id":4,"name":"star","content":"准四星"},{"id":5,"name":"star","content":"三星"},{"id":6,"name":"star","content":"准三星"},{"id":7,"name":"star","content":"二星"},{"id":8,"name":"star","content":"经济型"}];

                    $el.selection('source',data).on('bs.selection.changed',function(e,selection,$item){
                        var names = [];
                        selection.items().each(function(){
                            if(this.checked) names.push($(this).parents('li').data('bs.selection.item.data').content);
                        });
                        selection.title(names.length<=0?selection.$el.attr('data-title'):names.join(',')+' <b class="caret"></b>');
                    });

                }(jQuery,jQuery('#small-exp'));
            </script>

            <h3>简单使用</h3>
            <div>
                <pre id="selection-syntax" data-target="code-syntax">
//简单使用
$('#small-exp').selection();
                </pre>

                <h3>动态加载</h3>
                <pre id="selection-syntax" data-target="code-syntax">
//数据源
var data = [
    {"id":1,"name":"star","content":"五星"},
    {"id":2,"name":"star","content":"准五星"},
    {"id":3,"name":"star","content":"四星"},
    {"id":4,"name":"star","content":"准四星"},
    {"id":5,"name":"star","content":"三星"},
    {"id":6,"name":"star","content":"准三星"},
    {"id":7,"name":"star","content":"二星"},
    {"id":8,"name":"star","content":"经济型"}
];
//动态加载例子
$('#small-exp').selection('source',data);
                </pre>
                <h3>事件</h3>
                <pre id="selection-syntax" data-target="code-syntax">
//选择触发事件
$('#small-exp').selection('source',data).on('bs.selection.changed',function(e,selection,$item){
    ...
});
                </pre>
            </div>
            <blockquote>
            详细参考：<a href="http://git.oschina.net/packy-tang/Bootstrap-Selection" target="__bank">http://git.oschina.net/packy-tang/Bootstrap-Selection</a>
            </blockquote>
        </div>


        <!-- 说明用的代码 -->
        <script type="text/javascript">
          String.prototype.htmlEntities = function () {return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');};



          jQuery(document).ready(function(){

            function syntax($el){
              $el.text($el.html().trim());
            };

            $('[data-target="code-syntax"]').each(function(){
              syntax($(this));
            });

            $('[data-target="in-code-syntax"]').on('click',function(e){
              var view = $(this).attr('data-in')?$(this).attr('data-in'):this;
              $(view).html($(this).clone().removeAttr('data-target').removeAttr('data-in'));
              syntax($(view));

              e.preventDefault();
              return false;
            });
          });
        </script>
    </body>
</html>